<template>
    <el-row>
        <el-form :model="productSearchObj"
            label-width="120px"
            class="search_prod">
            <el-form-item label="商品分类">
                <el-col :span="5">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-cascader :options="data"
                            :props="optionProps"
                            :show-all-levels="false"
                            v-model="op"
                            size="small"
                            change-on-select
                            placeholder="商品分类"
                            clearable></el-cascader>
                    </el-col>
                </el-col>
                <el-col class="tr col_label"
                    :span="3">商品名称&nbsp;&nbsp;&nbsp;</el-col>
                <el-col :span="5">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-input size="small"
                            clearable
                            v-model="productSearchObj.title"
                            placeholder="商品名称"></el-input>
                    </el-col>
                </el-col>
                <el-col class="tr col_label"
                    :span="3">商家名称&nbsp;&nbsp;&nbsp;</el-col>
                <el-col :span="5">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-input size="small"
                            clearable
                            v-model="productSearchObj.sid_cn"
                            placeholder="商家名称"></el-input>
                    </el-col>
                </el-col>
            </el-form-item>
            <el-form-item label="产品价格">
                <el-col :span="5">
                    <el-col :span="11"
                        style="width:72px">
                        <el-input size="small"
                            clearable
                            v-model.number="productSearchObj.price_begin">
                        </el-input>
                    </el-col>
                    <el-col :span="2"
                        class="tc"
                        style="width:26px">-</el-col>
                    <el-col :span="11"
                        style="width:72px">
                        <el-input size="small"
                            clearable
                            v-model.number="productSearchObj.price_end">
                        </el-input>
                    </el-col>
                </el-col>
                <el-col class="tr col_label"
                    :span="3">成本价格&nbsp;&nbsp;&nbsp;</el-col>
                <el-col :span="5">
                    <el-col :span="11"
                        style="width:72px">
                        <el-input size="small"
                            clearable
                            v-model.number="productSearchObj.cost_price_begin">
                        </el-input>
                    </el-col>
                    <el-col :span="2"
                        class="tc"
                        style="width:26px">-</el-col>
                    <el-col :span="11"
                        style="width:72px">
                        <el-input size="small"
                            clearable
                            v-model.number="productSearchObj.cost_price_end">
                        </el-input>
                    </el-col>
                </el-col>
                <el-col :span="2"
                    style="height:20px">

                </el-col>
                <el-col :span="9">
                    <el-checkbox true-label="1"
                        false-label=''
                        v-model="productSearchObj.is_mail">免邮</el-checkbox>
                    <el-checkbox true-label="1"
                        false-label=''
                        v-model="productSearchObj.is_top">置顶</el-checkbox>
                    <el-checkbox true-label="1"
                        false-label=''
                        v-model="productSearchObj.is_coupon">红包券</el-checkbox>
                </el-col>
            </el-form-item>
            <el-form-item label="上传管理员">
                <el-col :span="5">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-input size="small"
                            clearable
                            v-model="productSearchObj.admin_account">
                        </el-input>
                    </el-col>
                </el-col>

                <el-col class="tr col_label"
                    :span="3"
                    v-if="!is_supplier">供应商帐号&nbsp;&nbsp;&nbsp;</el-col>
                <el-col :span="5"
                    v-if="!is_supplier">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-input size="small"
                            clearable
                            v-model="productSearchObj.username">
                        </el-input>
                    </el-col>
                </el-col>

            </el-form-item>
            <!-- <el-form-item label="商品类型">
                <el-col :span="5">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-select v-model="productSearchObj.types2"
                            clearable
                            size="small"
                            placeholder="请选择商品类型">
                            <el-option v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"></el-option>
                        </el-select>
                    </el-col>
                </el-col>
                <el-col class="tr col_label"
                    :span="3"
                    v-if="!is_supplier">供应商帐号&nbsp;&nbsp;&nbsp;</el-col>
                <el-col :span="5"
                    v-if="!is_supplier">
                    <el-col :span="24"
                        class="search_input_width">
                        <el-input size="small"
                            clearable
                            v-model="productSearchObj.username">
                        </el-input>
                    </el-col>
                </el-col>
            </el-form-item> -->

            <el-form-item>
                <el-row class="tl">
                    <el-col :span="24">
                        <el-button :loading='$store.state.isLoading'
                            size="small"
                            type="primary"
                            @click="onSubmit">查询</el-button>
                        <el-button :loading='$store.state.isLoading'
                            size="small"
                            type="primary"
                            @click="delSubmit">一键清除</el-button>
                    </el-col>
                </el-row>
            </el-form-item>
        </el-form>
        <el-row class="search_prod"
            style="padding-top:0">
            <div class="sups_tub clearfix ">
                <div class="tabs j-tab clearfix mgt10 mgb20 tl user_tables">
                    <a @click="getInfo('1')"
                        class=" tabs_a f_l"
                        :class="{template_active:acIndex=='1'}">
                        出售中
                    </a>
                    <a @click="getInfo('2')"
                        class=" tabs_a f_l "
                        :class="{template_active:acIndex=='2'}">
                        已售罄库存为
                    </a>
                    <a @click="getInfo('3')"
                        class=" tabs_a f_l "
                        :class="{template_active:acIndex=='3'}">
                        仓库中
                    </a>
                    <a @click="getInfo('4')"
                        class=" tabs_a f_l "
                        :class="{template_active:acIndex=='4'}">
                        待审核
                    </a>
                    <a @click="getInfo('5')"
                        class=" tabs_a f_l "
                        :class="{template_active:acIndex=='5'}">
                        驳回商品
                    </a>
                    <a @click="getInfo('6')"
                        class=" tabs_a f_l "
                        :class="{template_active:acIndex=='6'}">
                        全部商品
                    </a>
                </div>
            </div>
        </el-row>
    </el-row>
</template>
<script>
export default {
  name: "productSearch",
  data() {
    return {
      options2: [
        { label: "普通商品", value: "0" },
        { label: "会员商品", value: "1" }
      ],
      productSearchObj: {
        cate_id: "",
        title: "",
        sid_cn: "",
        price_begin: "",
        price_end: "",
        cost_price_begin: "",
        cost_price_end: "",
        is_mail: "",
        is_top: "",
        is_coupon: "",
        username: ""
      },
      optionProps: {
        value: "id",
        label: "title",
        children: "z"
      },
      data: [],
      op: [],
      acIndex: "1",
      checked: false,
      is_supplier: true
    };
  },
  methods: {
    delSubmit() {
      this.productSearchObj = {
        cate_id: "",
        title: "",
        sid_cn: "",
        price_begin: "",
        price_end: "",
        cost_price_begin: "",
        cost_price_end: "",
        is_mail: "",
        is_top: "",
        is_coupon: "",
        username: ""
      };
      this.$emit("sendSearch", this.productSearchObj);
    },
    onSubmit() {
      this.$emit("sendSearch", this.productSearchObj);
    },
    getInfo(iddex) {
      var obj = {};
      if (iddex == "1") {
        obj.show = "1";
        obj.stock = "";
        obj.is_check = "1";
      } else if (iddex == "2") {
        obj.stock = 0;
        obj.show = "";
      } else if (iddex == "3") {
        obj.show = "0";
        obj.stock = "";
      } else if (iddex == "4") {
        obj.is_check = "0";
      } else if (iddex == "5") {
        obj.is_check = "3";
      } else if (iddex == "6") {
        obj.is_all = "1";
      }
      if (this.$route.path.indexOf("suppliershops") >= 0) {
        obj.is_supplier = 1;
      }
      this.$emit("sendItem", obj);
      this.acIndex = iddex;
    },
    getProductList() {
      var params = {};
      params.parent_id = "";
      this.$api.getShops.getProductCateTreeList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.$store.commit('setShopCateList',res.data.result)
        }
      });
    }
  },
  created() {
    if (this.$route.path.indexOf("suppliershops") >= 0) {
      this.productSearchObj.is_supplier = 1;
      this.productSearchObj.sid_cn = this.$route.query.nickname || "";
      this.is_supplier = false;
    }
    if (this.$route.query.show && this.$route.query.show == 1) {
      this.acIndex = 1;
    }
    if (this.$route.query.stock) {
      this.acIndex = 2;
    }
    if (this.$route.query.show && this.$route.query.show == 0) {
      this.acIndex = 3;
    }
    this.getProductList();
  },
  watch: {
    op(val) {
      this.productSearchObj.cate_id = val[val.length - 1];
    }
  }
};
</script>
